CSS学习笔记(十) 界面组件之表单

1.概述

表单与其他页面元素的作用不同。其他元素是把服务器发过来的内容显示给用户，而表单则是 把用户的信息发送给服务器。

form 元素有两个必要的属性：action 和 method。
action 属性用于指定服务器上用来处理表单数据的文件的URL。
method (值为 post 或 get)用于指定怎么把数据发送到服务器。

所谓 控件，是对表单中用来收集数据的各种表单组件的通称，包括文本框、复选框、单选按钮等输入类型。

表单中数据的发送形式：名 = 值，其中，name 就是控件 name 属性中设定的名字。

2. 表单控件

2.1 文本域

<input type="text" name="text" value="" />

2.2 密码域

<input type="password" name="text" value="" />

2.3 单选按钮

<input type="radio" name="sex" value="male" /> Male
<input type="radio" name="sex" value="female" /> Female

2.4 复选框

<input type="checkbox" name="check1" value="" />
<input type="checkbox" name="check2" value="" />
<input type="checkbox" name="check3" value="" />

2.5 按钮

<input type="button" value="确认" />

2.6 重置按钮

<input type="reset" value="重置" />

2.7 提交按钮

<input type="submit" value="提交" />

2.8 隐藏域

<input type="hidden" value="我是一个隐藏域" />

2.9 上传域

<input type="file" value="" />

2.10 图片按钮

<input type="image" src="image.png" />

2.11 下拉列表

<select>
   <option value="0">0</option>
   <option value="1">1</option>
   <option value="2">2</option>
</select>  

属性	可选值	说明
disabled	disabled	规定禁用该下拉列表
multiple	multiple	规定可选择多个选项
name	name	规定下拉列表的名称
size	number	规定下拉列表中可见选项的数目

2.11 label

label 元素不会向用户呈现任何特俗效果。不过，它为鼠标用户改进了可用性。如果你在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动转到和标签相关的表单控件上。

<p><label><input type="radio" name="male" />男人</label></p>
<p><label><input type="radio" name="female" />女人</label></p>

或者写成这样：

<form>
  <label for="male">Male</label>
  <input type="radio" name="sex" id="male" />
  <br />
  <label for="female">Female</label>
  <input type="radio" name="sex" id="female" />
</form>

2.12 disable与readonly

禁用和只读属性。readonly 只针对 input(text / password) 和 textarea 有效，而 disabled 对于所有的表单元素都有效，包括 select, radio, checkbox, button 等。但是表单元素在使用了 disabled 后，当我们将表单以 POST 或 GET 的方式提交的话，这个元素的值不会被传递出去，而 readonly 会将该值传递出去。

2.13 textarea

<textarea cols="10" rows="10">这是个文本域。</textarea>

2.14 fieldset

定义域。fieldset 用于给表单元素分组，legend 用于设置分组标题。

<fieldset>
    <legend>你的信息？</legend>
    身高: <input type="text" value="180" />
    体重: <input type="text" value="200" />
</fieldset>

HTML5 新增多个新的表单输入类型，请参考本文下面的链接。

3.表单属性

HTML5 新增多个新的表单属性，请参考本文下面的链接。

4.表单验证

<form>
    <input type="text" id="text_1" />
    <input type="text" id="text_2" />
    <button type="submit" id="btnSubmit">提交</button>     
</form>

$(document).ready(function(){
    $('#btnSubmit').click(function(){
        // 验证非空
        if($('#text_1').val()==''){
            alert("不能为空！");
            return false;    // 阻止提交
        }
        // 验证是否数字
        else if(checkOnlyNum($('#text_2').val())==false){
            return false;    
        }
    });

    // 正则方法
    function checkOnlyNum(s){
        $oOnlyNum = /^(0|[1-9][0-9]*)$/;    // 正则表达式
        if(!$oOnlyNum.test(s)){
            alert('只能为数字！');
            return false;
        }else{
            return true;
        } 
    }
});

---

推荐阅读

• Web Form Design:Filling in the Blanks - by_Luke Wroblewski
• SitePoint HTML Reference » HTML Elements| Learn HTML | Tags | Tutorials | HTML Cheat Sheet

---

参考资料

• CSS设计指南
• HTML之表单元素 - 逆心 - 博客园
• HTML5 表单 Input 类型 - W3School
• HTML5 表单 表单元素 - W3School
• HTML5 表单 表单属性 - W3School